<template>
  <div class="selector-wrapper">
    <!-- 单选模式 -->
    <van-picker
        v-if="!multiple"
        v-model="selectedValue"
        :columns="options"
        :title="placeholder"
        @confirm="handleConfirm"
        @cancel="handleCancel"
        show-toolbar
    />

    <!-- 多选模式 -->
    <van-checkbox-group
        v-if="multiple"
        v-model="selectedValues"
        @change="handleCheckboxChange"
    >
      <van-cell
          v-for="option in options"
          :key="option.value"
          clickable
          :title="option.label"
          @click="toggleOption(option.value)"
      >
        <template #right-icon>
          <van-checkbox :name="option.value" shape="square" />
        </template>
      </van-cell>
    </van-checkbox-group>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { VanPicker, VanCheckboxGroup, VanCheckbox, VanCell } from 'vant';

// 定义选项数据类型
interface Option {
  label: string;
  value: string | number;
}

// 组件入参
const props = defineProps<{
  options: Option[];
  multiple?: boolean;
  modelValue?: string | number | (string | number)[] | undefined;
}>();

// 组件出参
const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number | (string | number)[] | undefined): void;
}>();

// 单选值处理
const selectedValue = ref<string | number | undefined>(props.modelValue as string | number | undefined);

// 多选值处理
const selectedValues = ref<(string | number)[]>(
    props.multiple && Array.isArray(props.modelValue)
        ? props.modelValue
        : []
);

// 占位文本
const placeholder = props.multiple ? '请选择多个选项' : '请选择一个选项';

// 单选确认事件
const handleConfirm = (value: string | number) => {
  selectedValue.value = value;
  emit('update:modelValue', value);
};

// 单选取消事件
const handleCancel = () => {
  selectedValue.value = props.modelValue as string | number | undefined;
};

// 多选切换事件
const toggleOption = (value: string | number) => {
  const index = selectedValues.value.indexOf(value);
  if (index === -1) {
    selectedValues.value.push(value);
  } else {
    selectedValues.value.splice(index, 1);
  }
};

// 多选值变化事件
const handleCheckboxChange = (values: (string | number)[]) => {
  emit('update:modelValue', values);
};

// 监听外部值变化
watch(
    () => props.modelValue,
    (newValue) => {
      if (props.multiple) {
        selectedValues.value = Array.isArray(newValue) ? newValue : [];
      } else {
        selectedValue.value = newValue as string | number | undefined;
      }
    },
    { immediate: true }
);

// 监听选项数据变化
watch(
    () => props.options,
    (newOptions) => {
      const validValues = newOptions.map(option => option.value);

      // 验证单选值有效性
      if (!props.multiple && selectedValue.value) {
        if (!validValues.includes(selectedValue.value)) {
          selectedValue.value = undefined;
          emit('update:modelValue', undefined);
        }
      }

      // 验证多选值有效性
      if (props.multiple) {
        const validSelected = selectedValues.value.filter(v => validValues.includes(v));
        if (validSelected.length !== selectedValues.value.length) {
          selectedValues.value = validSelected;
          emit('update:modelValue', validSelected);
        }
      }
    },
    { deep: true }
);
</script>

<style scoped>
.selector-wrapper {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

/* 多选模式下的单元格样式 */
::v-deep .van-cell {
  border-bottom: 1px solid #eee;
}

::v-deep .van-cell:last-child {
  border-bottom: none;
}
</style>
